<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>3.组件嵌套</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
  </head>
  <body>
    <!-- 准备好一个容器-->
    <div id="app">
      <News></News>
      <News2></News2>
    </div>
  </body>

  <script type="text/javascript">
    //阻止 vue 在启动时生成生产提示。
    Vue.config.productionTip = false;
   
    //创建公共组件，谨慎使用
    let Hello = Vue.extend({
            template:`
                <h1 style='color:red;'>这是hello组件</h1>
            `
        })
    Vue.component("Hello",Hello)
    //创建组件
    let News = Vue.extend({
      //
      template: ` <div>
        <Hello/>
            <h1>{{title}}</h1>
            <h1>{{hot}}</h1>
            <h1>{{count}}</h1>
            <button @click="add">加加加</button>
        </div>`,
      data() {
        return {
          title: "新闻热点事件",
          hot: "做一个吃瓜群众",
          count: 100,
        };
      },
      methods: {
        add() {
          this.count += 100;
        },
      },
    });

    //创建组件
    let News2 = Vue.extend({
      name:News2,//制定Vue开发者工具的名字
      template: ` <div>
        <Hello/>
            <h1>{{title}}</h1>
            <h1>{{hot}}</h1>
            <h1>{{count}}</h1>
            <button @click="add">加加加</button>
        </div>`,
      data() {
        return {
          title: "新闻热点事件",
          hot: "做一个吃瓜群众",
          count: 100,
        };
      },
      methods: {
        add() {
          this.count += 100;
        },
      },
    });

    new Vue({
      el: "#app",
      //注册组件
      components: {
        News,
        News2,
      },
    });
  </script>
</html>
